<section class="app-page select-none dark-bg">
  <header class="header dark-bg-gary dark-shadow">
    <div class="header-top dark-border-color">
      <img [src]="commonService.settings().favicon" class="logo" alt="logo" />
      <div class="open" [class.active]="open" (click)="handleToggleOpen()">
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>

    <nav class="nav-open" [class.active]="open">
      <div
        *ngFor="
          let item of commonService.navs();
          let i = index;
          trackBy: commonService.trackByItem
        "
        (click)="handleCilckNav(item.id)"
        [class.active]="commonService.oneIndex === i"
        class="nav-title"
      >
        {{ item.title }}
      </div>
    </nav>
  </header>

  <app-search class="mt-2.5 flow-root" />

  <div class="wrapper" *ngIf="commonService.navs()[commonService.oneIndex]">
    <nav
      class="children-nav dark-bg"
      *ngIf="commonService.navs()[commonService.oneIndex]?.nav?.length"
    >
      <span
        class="tag dark-text"
        *ngFor="
          let item of commonService.navs()[commonService.oneIndex].nav;
          let i = index;
          trackBy: commonService.trackByItem
        "
        [class.active]="commonService.twoIndex === i"
        (click)="commonService.handleClickClass(item.id)"
      >
        {{ item.title }}
      </span>
    </nav>
    <div *ngFor="let item of commonService.currentList; index as i">
      <app-toolbar-title
        [dataSource]="item"
        (onCollapse)="commonService.onCollapse(item)"
      />

      <div
        [class.hidden]="item['collapsed']"
        [ngClass]="{
          'px-3 grid gap-x-4 gap-y-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4':
            commonService.settings().appCardStyle !== 'icon',
          'flex flex-wrap gap-x-6 gap-y-4':
            commonService.settings().appCardStyle === 'icon',
          '2xl:grid-cols-6':
            commonService.settings().appCardStyle === 'original' ||
            commonService.settings().appCardStyle === 'example',
        }"
      >
        <app-card
          *ngFor="let el of item.nav; trackBy: commonService.trackByItemWeb"
          [cardStyle]="commonService.settings().appCardStyle"
          [dataSource]="el"
          class="column-border"
        ></app-card>
      </div>
    </div>
  </div>

  <app-footer />
  <app-fixbar
    (onCollapse)="commonService.onCollapseAll()"
    [collapsed]="commonService.collapsed"
  />
</section>
